<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 v-on:click="handle">{{msg}}</h2> 
       <!-- <img v-bind:src='url' alt=""> -->
        文本框<input type="text" v-model="msg"><br>
        单选  <input type="radio" value="nan" v-model="sex">男
             <input type="radio" value="nv" v-model="sex">女  
             <br>
        多选 <input type="checkbox" value="a" v-model="letter">A
             <input type="checkbox" value="b" v-model="letter">B
             <input type="checkbox" value="c" v-model="letter">C
             <input type="checkbox" value="d" v-model="letter">D
             <br>
         下拉菜单 <select v-model="num">
                     <option value="one" >1</option>
                     <option value="two" >2</option>
                     <option value="three" >3</option>
                     <option value="four" >4</option>
                 </select>
        
      </div>
</body>
</html>
<script>
    const vm = new Vue({
        el:'#root',
        // data:{
        //     msg:'hello'
        // },
        data(){
            return{
                msg:'hello',
                url:'./images/1.jpg',
                sex:'nan',
                letter:['a','b'],
                num:'four'
            }
        },
        methods:{
             handle(){
                 vm.msg='111'
                 //vm.msg.style.color = 'red'
             }
        }
    })
    //vm.$mount('#root')  
</script>